var config = require('home:widget/ui/config/config.js');
function Card(data) {
	this._bank_name = data.bank_type;
	this._card_num = data.bankcard_number;
	this._bank_card_id = data.id;
}
Card.prototype.init = function() {
	this._index = 0;
	this._z_index = 0;
	this._status = 0;
	this._flag = 0;
};

Card.prototype._build = function() {
	var template = __inline("./card.tmpl");
	var tmp_num = (this._card_num + '').replace(/(\d{4})(\d{4})(\d{4})(\d{4})(\d*)/,"$1  $2  $3  $4  $5");
	var tmp_name = config.zrbConf.bank_list[this._bank_name];
    var content = template({
    	bank_name : tmp_name,
    	card_num : tmp_num,
    	bank_card_id : this._bank_card_id
    });
    this._$html = $(content);
    return this._$html;
}
Card.prototype.render = function($container,index) {
    var imgMap = {
        '0':__uri('./img/Card_0_png8.png'),
        '1':__uri('./img/Card_1_png8.png'),
        '2':__uri('./img/Card_2_png8.png'),
        '3':__uri('./img/Card_3_png8.png')
    };
	this._build();
	this._$container = $container;
	this._index = index;
	$container.append(this._$html);
	this._$html.css('background-image','url('+imgMap[index]+')');
	this.bindEvent();
}
Card.prototype.resetZIndex = function() {
	var me = this;
	_z_index = 5 - Math.abs(me._flag - me._index);
	me.setZIndex(_z_index);
}
Card.prototype.bindEvent = function() {
	var me = this;
	this._$html.hover(function () {
		me.setZIndex(6);
		me._$html.find('.mask').css('display','none');
		me._$container.trigger('mouseoverIndex',{'index':me._index});
	},function () {
		me._$container.trigger('mouseoutIndex',{'index':me._index});
		me._$html.find('.mask').css('display','block');
		me.resetZIndex();
	});
	this._$html.click(function() {
		me._selected();
		me._$container.trigger('clickCard',{'index':me._index});
	});
}
Card.prototype._selected = function() {
	var me = this;
	me._$html.find('.mask').remove();
	$('.sMask').remove();
	var sMask = $('<div class="sMask"><div class="update_btn"></div><div class="del_btn"></div></div>');
	this._$html.append(sMask);
	sMask.find('.update_btn').bind('click',function() {
		if(!me.bankcardlayer) {
			var BankCardLayer = require('home:widget/ui/BankCardLayer/BankCardLayer.js');
			me.bankcardlayer = new BankCardLayer();
		}
		//设定属性
		me.bankcardlayer.setProperty(me._bank_card_id,me._bank_name,me._card_num);
		me.bankcardlayer.show();
		$('#BankCardLayer_submit').bind('click',function() {
	        if(!me.bankcardlayer.checkForm()) {
	        	return;
	        }
	        var opt = {
                'bankcard_id':me._bank_card_id,
                'bank_type':$('#bank_type').val(),
                'bankcard_number':$('#bankcard_number').val()
            };

	        $.post('/bank/editbankcard', opt ,function(data) {
	            if(data && data.error_no == 0) {
	                alert('银行卡修改完成。');
	                location.reload();
	            } else {
	                me.bankcardlayer.setError(data.error_message);
	            }
	        },'json');
	    })
	});
	sMask.find('.del_btn').bind('click',function() {
		if(!me.deletecardlayer) {
			var DeleteCardLayer = require('home:widget/ui/DeleteCardLayer/DeleteCardLayer.js');
			me.deletecardlayer = new DeleteCardLayer();
		}
		me.deletecardlayer.setProperty(me._bank_card_id);
		me.deletecardlayer.show();

	});
}
Card.prototype.resetMask = function(index) {
	var me = this;
	if(index != me._index) {
		me._$html.find('.sMask').remove();
		me._$html.find('.mask').remove();
		me._$html.append('<div class="mask"></div>');	
	}	
}
Card.prototype.setZIndex = function(index) {
	var me = this;
	//设定z-index
	me._z_index = index;
	me._$html.css('z-index',me._z_index);	
	//设定mask的z-index等于当前的+1
	me._$html.find('.mask').css('z-index',me._z_index + 1);
}
//设定基准距离的index
Card.prototype.setFlag = function(index) {
	this._flag = index;
}
module.exports = Card;
